<template>
  <div>
    <div class="bold mgb20">故障信息</div>
    <div class="flex">
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">客户：</div>
          <div class="text">{{ props.data.customerName }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">客户机号：</div>
          <div class="text">{{ props.data.customerClientId }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障类型：</div>
          <div class="text">{{ props.faultTypeList?.find(item => item.id === props.data.faultType)?.name }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障位置：</div>
          <div class="text">{{ (props.data.faultLineCode ?? '') + '-' + (props.data.faultStationCode ?? '') }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">产品型号：</div>
          <div class="text">{{ props.data.productionNumber }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">电控版本：</div>
          <div class="text">{{ props.data.electricVersion }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障最后上报时间：</div>
          <div class="text">{{ props.data.faultLastReportTime }}</div>
        </div>
      </div>
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">故障编号：</div>
          <div class="text mgr10">{{ props.data.faultNo }}</div>
          <el-tag :type="props.data.faultStatus === '1' ? 'warning' : props.data.faultStatus === '2' ? 'success' : 'primary'">{{
            props.data.faultStatus === '1' ? '待修复' : props.data.faultStatus === '2' ? '已修复' : '待通知'
          }}</el-tag>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">产线号：</div>
          <div class="text">{{ props.data.faultLineCode }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障部件：</div>
          <div class="text">{{ props.data.faultDeviceCode }}</div>
        </div>
        <!-- <div class="flex">
          <div class="title grey-text mgb10">故障描述：</div>
          <div class="text">{{ props.data.faultDesc }}</div>
        </div> -->
        <div class="flex">
          <div class="title grey-text mgb10">软件版本：</div>
          <div class="text">{{ props.data.bizSysVersion }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障发生时间：</div>
          <div class="text">{{ props.data.faultDiscoveryTime }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">服务人员：</div>
          <div class="text">{{ props.data.userList?.map(item => item.name)?.join(',') }}</div>
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="title grey-text mgb10">故障描述：</div>
      <div class="text">{{ props.data.faultDesc }}</div>
    </div>

    <div v-has-permi="['fault-detail-biz-check']">
      <div class="bold mgb20 mgt20">业务信息</div>
      <div class="flex">
        <div class="flex1">
          <div class="flex mgb10">
            <div class="title grey-text">站角色：</div>
            <div class="text">{{ props.data.bizStationRole }}</div>
          </div>
          <div class="flex">
            <div class="title grey-text mgb10">款名：</div>
            <div class="text">{{ props.data.bizStyleName }}</div>
          </div>
          <div class="flex">
            <div class="title grey-text mgb10">颜色：</div>
            <div class="text">{{ props.data.bizClozColor }}</div>
          </div>
          <div class="flex">
            <div class="title grey-text mgb10">工序名：</div>
            <div class="text">{{ props.data.bizProcess }}</div>
          </div>
        </div>
        <div class="flex1">
          <!-- <div class="flex mgb10">
          <div class="title grey-text">款号：</div>
          <div class="text">{{ props.data.customerName }}</div>
        </div> -->
          <div class="flex">
            <div class="title grey-text mgb10">品类：</div>
            <div class="text">{{ props.data.bizProductType }}</div>
          </div>
          <div class="flex">
            <div class="title grey-text mgb10">尺码：</div>
            <div class="text">{{ props.data.bizClozSize }}</div>
          </div>
          <div class="flex">
            <div class="title grey-text mgb10">员工：</div>
            <div class="text">{{ props.data.bizPerson }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bold mgb20 mgt20">告警信息</div>
    <div class="flex">
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">首次告警时间：</div>
          <div class="text">{{ props.data.noticeInfo[0] }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">告警次数：</div>
          <div class="text">{{ props.data.noticeInfo?.length }}</div>
        </div>
      </div>
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">最后告警时间：</div>
          <div class="text">{{ props.data.noticeInfo?.at(-1) }}</div>
        </div>
      </div>
    </div>

    <div class="bold mgb20 mgt20">修复信息</div>
    <div class="flex">
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">故障修复时间：</div>
          <div class="text">{{ props.data.faultRepairedTime }}</div>
        </div>
        <div class="flex">
          <div class="title grey-text mgb10">故障持续时长：</div>
          <div class="text">{{ props.data.faultRepairedTime ? calDuration(props.data.faultDiscoveryTime, props.data.faultRepairedTime) : calDuration(props.data.faultDiscoveryTime, new Date()) }}</div>
        </div>
      </div>
      <div class="flex1">
        <div class="flex mgb10">
          <div class="title grey-text">修复人：</div>
          <div class="text">{{ props.data.faultRepairedBy }}</div>
        </div>
        <div class="flex mgb10">
          <div class="title grey-text">故障修复类型：</div>
          <div class="text">{{ props.data.faultRepairedType }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { type PropType } from 'vue'
  import type { IFault } from '../config'
  import { calDuration } from '@/utils'

  const props = defineProps({
    data: {
      type: Object as PropType<IFault>,
      default: () => ({})
    },
    faultTypeList: {
      type: Array as PropType<any[]>,
      default: () => []
    }
  })
</script>

<style scoped>
  .text,
  .title {
    font-size: 14px;
  }
</style>
